<template>
  <div class="index">

    <el-card class="box-card">
       <el-form 
        ref="loginForm"
        :model="loginForm"
        :rules="loginFormRules"
        >
         <div style="text-align:center;">
           <i class="icon iconfont icon-apphoutaiguanli" style="font-size:100px;color:skyblue;"></i>
         </div>
         <h2 style="text-align:center;">商城后台管理系统</h2>
          <el-form-item prop="username"> 
            <el-input prefix-icon="icon iconfont icon-icon"  v-model="loginForm.username"   placeholder="请输入用户名" />
          </el-form-item>
          <el-form-item prop="password"> 
            <el-input 
                prefix-icon="icon iconfont icon-mima"  
                show-password
                type="password" 
                v-model="loginForm.password"   
                placeholder="请输入密码"> 
            </el-input>
          </el-form-item>

           <el-form-item style="text-align:center;"> 
              <el-button type="primary" style="width:45%;" @click="login">登录</el-button>
              <el-button type="primary" style="width:45%;" @click="reset">重置</el-button>
          </el-form-item>

        </el-form>
    </el-card>

    <img class="login-bg-img" src="./../../assets/images/login_center_bg.png" alt="">

  </div>
</template>

<script>
  
  import { checkLogin } from  './../../api/adminApi'
  import md5 from 'blueimp-md5'
  import config  from './../../config/config'

  export default {
    name: 'index',
    data(){
      return {
        // 数据绑定对象
        loginForm:{
          username:'admin',
          password:'admin'
        },
        // 验证规则对象
        loginFormRules:{
          username:[
            {required:true,message: '请输入用户名',trigger:'blur'},
            {min:3,max:15,message:'长度在3到15个字符',trigger:'blur'}
          ],
          password:[
            {required:true,message:"请输入密码",trigger:'blur'},
            {min:3,max:15,message:'长度在3到15个字符',trigger:'blur'}
          ]
        }

      }
    },
    methods:{
      // 登录
      login(){
        this.$refs.loginForm.validate(async (valild)=>{
            if(!valild) return;

            // 去登录
            // this.$message.success('去登录')
            const result = await checkLogin(this.loginForm.username,md5(this.loginForm.password,config.KEY))
            // console.log(result);
            // 判断
            if(result.status != 1) return this.$message.error(result.msg); 
            // 登录成功
            this.$message.success(result.msg); 
            // 保存 token
            window.sessionStorage.setItem(config.MANAGET_TOKEN,result.data.token)
            // 路由跳转
            this.$router.push('/home');
        })  
      },
      // 重置
      reset(){
        this.$refs.loginForm.resetFields();
      }
    }
  }
</script>


<style lang="less" scoped>
  .box-card{
    position: absolute;
    left: 0;
    right: 0;
    margin: 150px auto;
    width: 360px;
    border-top: 10px solid skyblue;
  }

  .login-bg-img{ 
    background-color: skyblue;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin-top: 220px;
  }
</style>
